<script setup lang="ts">
import { toRaw } from "vue";
import { QList, QItem, QItemSection, QSkeleton, QItemLabel, QTooltip, QBadge } from "quasar";

import { ExtIdTuple, ExtIntro, ExtOwner, TonTplGroup, User } from "qqlx-core";
import { getTimeAgo, toNumber } from "qqlx-cdk";

import { ComAvatar } from "../ComAvatar";

type ComGroup = ExtIdTuple & ExtOwner & ExtIntro;
const vueProps = defineProps<{
  list: ComGroup[];
  user?: User;
  entity?: ComGroup;
  loading?: boolean;
}>();

const emit = defineEmits<{
  (event: "pick", group: ComGroup): void;
}>();
</script>

<template>
  <div v-if="vueProps.list.length > 0">
    <q-list v-if="vueProps.loading">
      <q-item v-for="n of Array(vueProps.list.length || 4).fill(null)">
        <q-item-section>
          <q-item-label> <q-skeleton type="text" /> </q-item-label>
          <q-item-label caption> <q-skeleton type="text" width="65%" /> </q-item-label>
        </q-item-section>
      </q-item>
    </q-list>

    <template v-else>
      <div v-for="group of vueProps.list" :key="group.id" class="relative">
        <q-item clickable class="px-3 py-0 rounded" :class="{
          'opacity-100 font-semibold': group.id === vueProps.entity?.id,
          'opacity-50 text-info': group.id !== vueProps.entity?.id,
        }" @click="emit('pick', toRaw(group))">
          <q-item-section class="relative" side>
            <ComAvatar :user="group.justOwner" :size="24"></ComAvatar>
          </q-item-section>

          <q-item-section class="py-1.5" :class="{ 'line-through': group.isDisabled }">
            <div class="truncate w-full">{{ group.name }}</div>
          </q-item-section>

          <slot name="addon" :group="group"></slot>

          <q-tooltip class="text-lg min-w-48" anchor="center left" self="center right">
            <div class="">名称：{{ group.name || "-" }}</div>
            <div class="">描述：{{ group.desc || "-" }}</div>
            <div class="">备注：{{ group.remark || "-" }}</div>
            <div v-if="(group as TonTplGroup).formulaName" class="relative">
              <span>监测到公式：{{ (group as TonTplGroup).formulaName }}</span>
              <QBadge floating color="negative"></QBadge>
            </div>
            <div class="flex items-center gap-3 mt-3 justify-center">
              <ComAvatar :size="20" :user="group.justOwner" />
              <span>创建于 {{ getTimeAgo(toNumber(group.timeCreate)) }}</span>
            </div>
          </q-tooltip>
        </q-item>
        <QBadge v-if="group.refOwnerUUid32 !== vueProps.user?.uuid32" floating color="accent">已授权</QBadge>
      </div>
    </template>
  </div>
</template>

<style></style>
